<template>
  <div class="case-list">
    <van-search v-model="keyword" @search="onSearch" placeholder="请输入搜索关键词" />
    <van-cell-group>
      <van-cell v-for="(code, index) in codeList" :key="code.code" is-link @click="$router.push({ path: '/index/', query: { code: code.code, test: 1 } })">
        <template #title>
          <span v-text="code.title" :key="index" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
  import _ from 'lodash'
  import { codeList } from '../utils/codeList'
  import { isEmpty } from '../utils/utils'
  console.log(codeList)
  
  export default {
    name: 'CaseList',
    data() {
      return {
        codeList,
        codeListClone: _.cloneDeep(codeList),
        keyword: ''
      }
    },
    methods: {
      onSearch(value) {
        if (isEmpty(value)) {
          this.codeList = _.cloneDeep(this.codeListClone);
          return
        }
        const codeList = this.codeListClone.filter((val) => {
          return val.title.indexOf(value) > -1
        });
        this.codeList = codeList;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .case-list{
    padding-top: 55px;
    ::v-deep .van-search{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
    }
  }
</style>
